﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3D Tracking</title>
    <link href="../css/jquery.dataTables.css" rel="stylesheet" />
    <link href="../css/tracking3d.css" rel="stylesheet" />
    <link href="../css/dataTables.fixedHeader.min.css" rel="stylesheet" />
    <link href="../css/dataTables.scroller.min.css" rel="stylesheet" />
    <link href="../css/select2.css" rel="stylesheet" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/bootstrap-theme.min.css" rel="stylesheet" />
</head>
    <body style="background-color: #f0ffff;">
      
        <div style="position: absolute; width: 100%; height: 100%; overflow: hidden; ">
            <div style="text-align: center;margin: 5px" >
                <span>钻孔编号：</span>
                <span id="holeIds" style=" width: 800px; margin-top: 0px; overflow:hidden"></span>
                <button id="btnShow" class="btn btn-primary">展示</button>
                <button id="btnRefresh" class="btn btn-primary">恢复默认</button>
                <button id="btnReset" class="btn btn-primary">Reset</button>
            </div>

            <div id="container" style="width: 100%; height: 94%; position: relative; ">
                <div id="chartContainer" style=" width:20%;height:100%;position: absolute;display: none;">
                    <div id="yzChart" style="height: 33%"></div>
                    <div id="xyChart" style="height: 34%"></div>
                    <div id="xzChart" style="height: 33%"></div>
                </div>
                <div id="dataContainer" style=" width:300px;height:auto;position: absolute;display: none;right: 0px;top: 20px; overflow:auto"></div>
            </div>

            <div id="tips" style="width: 240px; height: auto; position: absolute; z-index: 999999; display: none; color: #ffffff;">
                序号:017<br />坐标：70.00,77.13,50.00<br />时间：2014/5/13 10:35:03<br />孔深：0.00
            </div>
        </div>
        
        <footer>

            <!--        <script src="../js/libs/jquery-1.6.4.js"></script>-->
            <script src="../js/libs/jquery.js"></script>
            <script src="../js/libs/jquery.mousewheel.js"></script>
            <script src="../js/libs/Three.js"></script>
            <script src="../js/libs/RequestAnimationFrame.js"></script>
            <script src="../js/libs/stats.min.js"></script>
            <script src="../js/libs/jsUtils.js"></script>
            <script src="../js/libs/dat.gui.min.js"></script>
            <script src="../js/libs/canvasjs.min.js"></script>
            <script src="../js/libs/jquery.dataTables.min.js"></script>
            <script src="../js/libs/dataTables.fixedHeader.min.js"></script>
            <script src="../js/libs/select2.js"></script>
            <script src="../js/libs/bootstrap.min.js"></script>
            <script src="../js/controls/TrackballControls.js"></script>
            <script src="../js/controls/CoordinateControls.js"></script>
            <script src="../js/controls/FirstPersonControls.js"></script>
            <script src="../js/controls/OrbitControls.js"></script>
            <script src="../js/sim/sim.js"></script>
            <script src="../js/three-helper.js"></script>

            <script src="js/tracking3d.js"></script>
            <script src="js/axis.js"></script>
            <script src="js/axis2d.js"></script>
            <script src="js/tracking.js"></script>
            <script src="js/plane.js"></script>
            <script src="js/pointSphere.js"></script>
            <script src="js/xyView.js"></script>
            <script src="js/xzView.js"></script>
            <script src="js/yzView.js"></script>

            <script src="../fonts/optimer_regular.typeface.js"></script>

            <script>
          
                var container = $("#container")[0];
                var app = new Tracking3DApp();
                app.init({
                    container: container,
                });
                app.run();

                $(document).ready(function () {
                
                    var pageSize = 1; //查找5天的数据。
                    $("#holeIds").select2({
                        placeholder: "请选择最多5个钻孔编号",
                        maximumInputLength: 10,
                        maximumSelectionSize: 5,
                        multiple: true,
                        ajax: {
                            dataType: 'jsonp',
                            quietMillis: 50,
                            //The url of the json service
                            url: "controller/DrillingDataController.ashx?cmd=GetHoleIds",
                            //Our search term and what page we are on
                            data: function(term, page) {
                                return {
                                    pageSize: pageSize,
                                    pageNum: page,
                                    searchTerm: term
                                };
                            },
                            results: function (data, page) {
                                var select2Results = [];
                                var d = $.parseJSON(data);
                                var more = (page * pageSize) < d.Total;
                                for (var i = 0; i < d.Results.length; i++) {
                                    var item = d.Results[i];
                                    var group = select2Results[item.Group];
                                    if (!group) {
                                        group = { text: item.Group, children: [] };
                                    }
                                    for (var j = 0; j < item.Options.length; j++) {
                                        var option = item.Options[j];
                                        group.children.push({ id: option.id, text: option.text });
                                    }
                                
                                    select2Results.push(group);
                                }

                                return {
                                    results: select2Results, more: more
                                };
                            }
                        },
                        dropdownCssClass: "bigdrop",
                        escapeMarkup: function(m) { return m; } 
                    });
                    $("#btnShow").click(function () {
                        var list = $("#holeIds").select2("val");
                        if (!list && list.length == 0) return;

                        $.getJSON("controller/DrillingDataController.ashx?cmd=GetHoleData", { holeId: list }, function (result) {
                            app.show(result);
                        }).error(function (jqXHR, textStatus, errorThrown) {
                            console.log("error " + textStatus);
                            console.log("incoming Text " + jqXHR.responseText);
                        });
                    });
                    
                    $("#btnReset").click(function () {
                        app.controls.reset();
                    });

                    $("#btnRefresh").click(function () {
                        window.location.reload();
                        localStorage.clear();
                    });

                    $(window).resize(function () {
                        app.lookAtZero();
                    });
                });
            </script>

        </footer>
    </body>
</html>
